<script setup>
import {computed, onMounted, ref, watch} from 'vue';
import DragSize from "@/components/utils/DragSize.vue";
import {entities_store, transactions_store} from "@/global_store";

import {Base64} from "js-base64";
// Using ES6 import syntax
import 'highlight.js/styles/stackoverflow-light.min.css';
import hljs from 'highlight.js/lib/core';
import latex from 'highlight.js/lib/languages/latex';
// import hljsVuePlugin from "@highlightjs/vue-plugin";
// import viewer from '@/plugins/pdfjs/web/viewer.html';
// 这个pdf.js目前是无法打包的，所以只能提前放到public或者dist文件夹中
// 还需要把viewer.mjs中检测跨域并报错的几行注释掉

// Then register the languages you need
hljs.registerLanguage('latex', latex);

// 这插件两年没更新了，现在在code属性更新后highlightedCode属性也不更新，搞半天没成功算了不用了
// defineOptions({
//     components: {
//         highlightjs: hljsVuePlugin.component,
//     }
// });

let show_pdf = ref(true);
let show_tex = ref(false);

const width = computed(() => transactions_store.pdf_preview.width);

const pdf_url = ref("");

const tex_html = ref("");

async function change_pdf_tex() {
    console.log("change_pdf_tex", current_file.value);
    let url;
    if (current_file.value === null || current_file.value === undefined) {
        return;
    }
    pdf_url.value = `plugin/pdfjs/web/viewer.html?file=https://gitea.librastalker.top/423A35C7/SharedSchoolSpace/raw/branch/main/${current_file.value.filepath}`;

    if (current_file.value.is_standard) {
        url = `https://gitea.librastalker.top/api/v1/repos/423A35C7/SchoolWork-LaTeX/contents/${current_file.value.filedir.split('-')[0]}/${current_file.value.filetype}/${current_file.value.filestem}.tex`;
        console.log(url);
        let _res = await fetch(url);
        let res = await _res.json();
        console.log(res);
        // 路径不存在时，res.content为空，此时会报错
        tex_html.value = hljs.highlight(Base64.decode(res.content), {language: "latex"}).value;
    }
}

const main_area = ref(null);

const current_file = computed(() => transactions_store.file_list.show.includes("by_time") ? entities_store.file_list[entities_store.current_file_index] : entities_store.current_file);

watch(() => [entities_store.file_list.length, entities_store.current_file_index, entities_store.current_file], () => change_pdf_tex());

// watch(() => entities_store.current_file_path, () => change_tex());

onMounted(() => {
    transactions_store.pdf_preview.width = parseInt(getComputedStyle(main_area.value).width) / 2;
})
</script>

<template>
    <div class="tab-bar">
        <button type="button" class="show-pdf iconfont icon-pdf" @click="show_pdf = !show_pdf" title="显示PDF预览"></button>
        <button type="button" class="show-tex iconfont icon-code" @click="show_tex = !show_tex" title="显示LaTeX源码"></button>
    </div>
    <div class="main-area" ref="main_area">
        <iframe :src="pdf_url" title="pdf_preview" class="pdf-preview-iframe" v-if="show_pdf" :style="{width: show_tex ? (width + 'px') : '100%'}"></iframe>
        <DragSize width_name="pdf_preview" v-if="show_pdf && show_tex"></DragSize>
        <pre class="tex_preview" v-if="show_tex" :style="{width: show_pdf ? `calc(100% - ${width}px - 50px)` : '100%'}">
<code v-html="tex_html"></code>
        </pre>
<!--        <highlightjs language='latex' :code="raw_tex" :ignoreIllegals="false"/>-->
    </div>
</template>

<style lang="scss" scoped>
.tab-bar {
    height: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;

    button {
        padding: 0.5em;
        margin-left: 0.5em;
        margin-right: 0.5em;
        color: #66ccff;
        background-color: #88888833;
        border: none;
        transition: background-color 500ms;
        border-radius: 50%;
        &:hover {
            background-color: #66ccff66;
        }
    }
}

.main-area {
    height: calc(100% - 2em);
    display: flex;
}

.pdf-preview-iframe {
    height: calc(100% - 4px);
    // 不知道为什么iframe总是凸出来一点，只能减掉了
    width: 100%;
}

pre {
    overflow-y: scroll;
    padding: 1em;
    margin: 0;
}

code {
    white-space: break-spaces;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
</style>